import React, { useState, useEffect  } from "react";
import ReactDOM from "react-dom";
import { connect } from 'dva';
import { Chart, LineAdvance, Point } from "bizcharts";
import { getLine } from './service.ts'

const chart = (props):React.FC => {

  const [data, setData] = useState(undefined)
  
  useEffect(async () => {
    const res = await getLine();
    res.data.forEach(item => {
      item.score = item.condimentsScore || item.proteinfatScore || item.fruitvegetablesScore || item.carbohydrateScore;
    })
    console.log(res.data);
    setData(res.data);
  
  }, [])
  

  // const data = [
  //   {
  //     year: '1991',
  //     value: 3,
  //   },
  //   {
  //     year: '1992',
  //     value: 4,
  //   },
  //   {
  //     year: '1993',
  //     value: 1,
  //   },
  //   {
  //     year: '1994',
  //     value: 4,
  //   },
  //   {
  //     year: '1995',
  //     value: 7,
  //   },
  //   //...
  // ];

  const scale = {
    type: {
      formatter: v => {
        return {
          condimentsScore: '调味料',
          proteinfatScore: '蛋白质与脂肪', 
          fruitvegetablesScore: '蔬菜与水果',
          carbohydrateScore: '碳水化合物',

        }[v]
      }
    }
  }
  return (
    <Chart scale={scale} padding="auto" autoFit  height={300} data={data}>
      <Point position="score*healthScore" color="type" shape='circle' />
      <LineAdvance  color="type"  position="score*healthScore" />
    </Chart>
  );
};

export default connect(({chart}) => ({
  data: chart.data,
}))(chart)